<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>filter——过滤器：作用是格式化文本</p>
    <p>1.过滤器的使用流程：先注册后使用（|）</p>
    <p>2.全局注册、局部注册</p>
    <p>3.串联使用：可以串联使用，参数是上一次的结果</p>
    <p>4.传参：第一个参数是上一次的结果，第二个参数是过滤器传过来的值</p>
    <!-- 2.使用过滤器 -->
    <p>我的收入：{{money | formatMoney}}</p>
    <input type="text" v-bind:value="money|format2">
    <p>我期望的收入：{{money | format2 | formatMoney(3)}}</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    // 全局注册，一个参数的过滤器的名字，第二个是函数
    Vue.filter('format2', (val)=> {
      return val+5000
    })
    let vm = new Vue({
      el: '#app',
      data: {
        money: 1000
      },
      // 1.注册过滤器（局部）
      filters: {
        formatMoney(val, num) {
          console.log(val, num);
          // 过滤器可以串联使用，第一个参数是上一次的结果，第二个参数是过滤器传过来的值
          return val.toFixed(num)
        }
      }
    })
  </script>
</body>
</html>